<template>
  <div>
    <Row class="margin-top-20">
      <i-form :label-width="80" :model="search" inline>
        <Form-item label="终端SN码">
          <i-select v-model="search.sn" clearable size="default" placeholder="全部">
            <i-option v-for="item in sn_list" :key="item.device_sn" :value="item.device_sn">{{ item.device_sn }}</i-option>
          </i-select>
        </Form-item>
        <!-- <Form-item label="用户ID">
          <i-select v-model="search.id">
            <i-option v-for="item in id_list" :key="item" :value="item">{{ item }}</i-option>
          </i-select>
        </Form-item> -->
        <i-button type="success" icon="ios-search" @click="handleSearch">查询</i-button>
      </i-form>
    </Row>
    <Row>
       <i-table :columns="columns" :data="data"></i-table>
      <Page class="fr margin-top-20" show-total :total="page.total" :page-size="page.size" :current="page.current" :show-elevator="true" @on-change="handleDocumentPage"></Page>
    </Row>
    <Row>
      <Modal v-model="vol_modal" title="设置音量" width="350">
        <Form :model="vol_form" :rules="rules" :label-width="80" @submit.native.prevent>
          <Form-item label="音量值：" prop="value" style="margin-bottom:0;">
            <i-input v-model.number="vol_form.value"></i-input>
            <span style="color:red;">音量值请设置为0-100的整数</span>
          </Form-item>
        </Form>
        <div slot="footer">
          <i-button type="primary" @click="handleClickSetVolumn">确定</i-button>
        </div>
      </Modal>
      <Modal v-model="status" title="播报状态" width="350">
        <div>
          <p>音量值：{{ status_form.vol }}</p>
          <p>支付金额：{{ status_form.money }}</p>
          <p>支付类型：{{ status_form.pay == 1 ? '支付宝支付' : status_form.pay == 2 ? '微信支付' : status_form.pay == 3 ? '云支付' : status_form.pay == 4 ? '余额支付' : status_form.pay == 5 ? '微信储值' : status_form.pay == 6 ? '微信买单' : status_form.pay == 7 ? '银联刷卡' : '通用' }}</p>
        </div>
        <div slot="footer"></div>
      </Modal>
    </Row>
  </div>
</template>

<script>
import { bindStatusTerminalInit, bindStatusTerminalSearch, bindStatusTerminalPage, bindStatusTerminalVolumn, bindStatusTerminalVolState } from "@/api/terminal";

export default {
  data() {
    return {
      vol_modal: false,
      status: false,
      data: [],
      sn_list: [],
      id_list: [],
      columns: [
        { title: '终端SN码', align: 'center', key: 'speakerid' },
        { title: '用户ID', align: 'center', key: 'userid' },
        { title: '用户标识', align: 'center', key: 'userid_int' },
        { title: '绑定状态', align: 'center', render: (h,params) => {
          return h('span',null, params.row.active == 1 ? '已绑定' : '未绑定')
        } },
        { title: '绑定时间', align: 'center', key: 'datetime' },
        { title: '音量值', align: 'center', render: (h,params) => {
          return h('i-button', {
            props: { type: 'text' },
            style: { color: '#2d8cf0' },
            on: {
              click: () => {
                this.handleSetVolumn(params.row.volume, params.row.userid, params.row.speakerid)
              }
            }
          }, params.row.volume)
        } },
        { title: '操作', align: 'center', render: (h, params) => {
          return h('div', null, [
            h('i-button', {
              props: {type: 'text'},
              style: { color: '#2d8cf0' },
              on: {
                click: () => {
                  this.handleClickStatus(params.row.userid, params.row.speakerid)
                }
              }
              }, '播报状态')
          ])
        } }
      ],
      page: {
        size: 0,
        current: 1,
        total: 0
      },
      search: {
        sn: '',
        id: ''
      },
      vol_form: {
        value: '',
        id: '',
        sn: ''
      },
      rules: {
        value: [{ required: true, trigger: 'blur', type: 'number', message: '请正确填写~' }]
      },
      status_form: {
        vol: '',
        money: '',
        pay: ''
      }
    }
  },
  methods: {
    handleDocumentInit() {
      bindStatusTerminalInit(this.$route.query.store_id).then(res => {
        if (res.data.code === 0) {
          this.data = res.data.data.list
          this.page.size = res.data.data.list_count
          this.page.current = res.data.data.page
          this.page.total = res.data.data.total_count
          this.sn_list = res.data.data.sn
        } else {
          this.$Message.error(res.data.message)
        }
      })
    },
    handleSearch() {
      bindStatusTerminalSearch(this.$route.query.store_id, this.search).then(res => {
        if (res.data.code === 0) {
          this.data = res.data.data.list
          this.page.size = res.data.data.list_count
          this.page.current = res.data.data.page
          this.page.total = res.data.data.total_count
        } else {
          this.$Message.error(res.data.message)
        }
      })
    },
    handleDocumentPage(v) {
      bindStatusTerminalPage(this.$route.query.store_id, this.search, v).then(res => {
        if (res.data.code === 0) {
          this.data = res.data.data.list
          this.page.size = res.data.data.list_count
          this.page.current = res.data.data.page
          this.page.total = res.data.data.total_count
        } else {
          this.$Message.error(res.data.message)
        }
      })
    },
    handleSetVolumn(v, id, sn) {
      this.vol_modal = true
      this.vol_form.value = v
      this.vol_form.id = id
      this.vol_form.sn = sn
    },
    handleClickSetVolumn() {
      bindStatusTerminalVolumn(this.vol_form).then(res => {
        if (res.data.code === 0) {
          this.$Message.success(res.data.message)
          this.vol_form.value = ''
          this.vol_form.id = ''
          this.vol_form.sn = ''
          bindStatusTerminalPage(this.$route.query.store_id, this.search, this.page.current).then(res => {
            if (res.data.code === 0) {
              this.data = res.data.data.list
              this.page.size = res.data.data.list_count
              this.page.current = res.data.data.page
              this.page.total = res.data.data.total_count
            } else {
              this.$Message.error(res.data.message)
            }
          })
          this.vol_modal = false
        } else {
          this.$Message.error(res.data.message)
        }
      })
    },
    handleClickStatus(id, sn) {
      bindStatusTerminalVolState(id, sn).then(res => {
        if (res.data.code === 0) {
          this.status_form.vol = res.data.data.data.volume
          this.status_form.money = res.data.data.data.price
          this.status_form.pay = res.data.data.data.price_type
          this.status = true
        } else {
          this.$Message.error(res.data.message)
        }
      })
    }
  },
  created() {
    this.handleDocumentInit();
  }
}
</script>

<style lang="less" scoped>
  @import '../../terminal.less';
</style>
